<template>
  <view class="shopCar">
    <shopCarTab :price-sort="priceSort" :click-name="clickName" @openClassification="openClassification" @searchFilterFn="searchFilterFn" />

    <view>
      <collectFrequently :list-data="listData" @fatherMethod="fatherMethod" />
    </view>

    <!-- 分类 -->
    <u-popup :show="regionShow" :round="10" mode="top" :closeable="true" @close="closeFn()">
      <view class="sort-topbar">
        <view v-for="(item, index) in classDataLst" :key="index" class="sort-list">
          <view class="list" :class="isClick==index?'list_active_box':''" @click="checkLiFn(item,index)">{{ item.categoryName }}</view>
        </view>
      </view>
    </u-popup>
  </view>

</template>
<script>

import { regularpurchaseSelect } from '@/api/yc_goods'
import collectFrequently from '@/purchaseOrder/collectFrequently';
import { getFrontCategoryList } from '@/api/yc_userInfo'
import { getPlatformTypeFn, setPageParamsFn } from '@/common/common'
import shopCarTab from '@/purchaseOrder/shopCarTab'
export default {
  components: {
    collectFrequently,
    shopCarTab
  },
  data() {
    return {
      title: 'Index',
      listData: [],
      isClick: -1, //是否选择了分类
      clickName: '全部分类',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      pageSize: 5,
      page: 1,
      regionShow: false,
      priceSort: 0,	//搜索列表：价格排序的入参 0：默认，1：价格由高到低，2：价格由低到高"
      classDataLst: [],
      oneCategoryId: 0, //分类id 默认全部
    }
  },
  onLoad(option) {
  },
  mounted() {
    //this.initPageFn(1)
  },
  methods: {
    //价格过滤
    searchFilterFn(searchParams) {
      this.priceSort = searchParams.orderType
      this.initPageFn(1)
    },
    // 传递给子组件的方法
    fatherMethod() {
      this.initPageFn(1)
    },
    /*初始化函数*/
    initPageFn(pageNum) {
      this.getMemberCollectFn(pageNum)
    },
    closeFn() {
      this.regionShow = false
    },
    /*查询商品列表*/
    getMemberCollectFn(pageNum) {
      if (pageNum) {
        this.page = pageNum
      }
      const {
        cityCode,
        warehouseCode
      } = this.vuex_cityInfo
      const platformType = getPlatformTypeFn(this.vuex_accountInfo.accountType)
      const params = {
        platformType,
        'wareHouseId': warehouseCode,
        'cityId': cityCode,	//城市编码，默认北京市（110100）
        'appletType': 'applet', //平台类型 applet-小程序
        'page_num': this.page,	//分页：当前页码，默认第一页
        'page_size': this.pageSize,	//分页：每页显示数据量，默认20条
        'orderType': this.priceSort,
        'oneCategoryId': this.oneCategoryId//分类
      }
      regularpurchaseSelect(params).then((res) => {
        if (res.errorCode != 0 || !res.data) {
          this.$emit('resetLoadMoreFn', { isLoadMore: false, loadStatus: '', page: 1 })
          this.listData = []
          return
        }
        this.$nextTick(() => {
          uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
          if (res.errorCode == 0) {
            setPageParamsFn(this, null)
            const ressult = res.data.result
            const packageList = []
            ressult.forEach(item => {
              packageList.push({
                skuImg: item.productmap.images ? item.productmap.images[0].imgUrl : '',
                skuName: item.productmap.sku_name,
                skuCode: item.productmap.sku_code,
                skuId: item.sku_id,
                expectDeliveryDay: item.productmap.expectDeliveryDay,
                nowPrice: item.productmap.sale_price,
                buyyerTimes: item.productmap.buyyer_times,
                type: item.productmap.type,
                unit: item.productmap.unit,
                collectId: item.collectId,
                spuCode: item.spu_code,
                customerCode: item.customer_code
              })
            });
            this.listData = this.page == 1 ? packageList : this.listData.concat(packageList)
            if (this.page == 1 && packageList.length == 0) {
              this.listData = []
              this.$emit('resetLoadMoreFn', { isLoadMore: false, loadStatus: '', page: 1 })
              return
            }
            if (packageList.length < this.pageSize) {
              this.$emit('resetLoadMoreFn', { isLoadMore: true, loadStatus: 'nomore', page: this.page })
            } else {
              this.$emit('resetLoadMoreFn', { isLoadMore: false, loadStatus: 'more', page: this.page })
            }
          } else {
            this.listData = []
            setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
            this.$emit('resetLoadMoreFn', { isLoadMore: false, loadStatus: '', page: 1 })
          }
        })
      }).catch((err) => {
        setPageParamsFn(this, 'ERROR', err.message ? err.message : '服务异常')
      })
    },
    //选择分类
    openClassification() {
      if (this.isClick == -1) {
        this.isClick = 0
      }
      this.getFrontCategoryListFn()
      this.regionShow = true
    },
    checkLiFn(item, index) {
      this.isClick = index
      this.clickName = item.categoryName
      this.oneCategoryId = item.categoryId
      this.regionShow = false
      this.initPageFn(1)
    },
    getFrontCategoryListFn() {
      const { warehouseCode, cityCode } = this.vuex_cityInfo
      const params = { 'wareHouseId': warehouseCode, 'cityId': cityCode, 'page_num': 1 }
      getFrontCategoryList(params).then((res) => {
        if (res.code == 0) {
          this.classDataLst = res.data
          this.classDataLst.unshift({ 'categoryId': 0, 'categoryName': '全部分类' })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sort-topbar{
  display: flex;
  padding: 79rpx 0 16rpx 32rpx;
  flex-wrap:wrap;
  .sort-list{
    width: 160rpx;
    margin:0 16rpx 16rpx 0;
    .list{
      width: 160rpx;
      height:64rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: $uni-f5bg-color;
      text-align: center;
      line-height: 64rpx;
      border-radius: 8rpx;
    }
    .list_active_box {
    border: 0.02rem solid #f53 !important;
    background: #fff !important;
    color: #f53 !important;
    font-weight: 700 !important;
    box-sizing: border-box;
    }
  }
}
.shopCar{
  padding-top:176rpx!important;
}
</style>
